<template>
	<view class="category">
		<view class="header">
			<view class="search">
				<image src="../../static/images/search.png" mode=""></image>
				<input type="text" value="" placeholder="搜索...." placeholder-class="placeholder"/>
			</view>
		</view>
		
		<!-- 内容 -->
		<view class="container">
			<view class="left_view">
				<scroll-view class="left_scroll" scroll-y="true" v-if="indexCateModel">
					<view class="scrollItem" :class="{active:nativeIndex===index}" v-for="(item,index) in indexCateModel" :key="item.id" @click="changeIndex(index)">{{item.name}}</view>
				</scroll-view>
			</view>
			
			<view class="right_view">
				<scroll-view class="right_scroll" scroll-y="true" >
					<view class="goodList">
						<view class ="goodItem" v-for="item in indexCateModel[nativeIndex].subCateList" :key="item.superCategoryId">
							<image :src="item.wapBannerUrl" mode=""></image>
							<view>{{item.name}}</view>
						</view>
					</view>
					
				</scroll-view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import { mapActions,mapState } from 'vuex'
	export default {
		data() {
			return {
				nativeIndex:0
			}
		},
		mounted(){
			this.getIndexCateModelActions()
		},
		computed:{
			...mapState({
				indexCateModel:(state)=>state.category.indexCateModel
			})
			
		},
		methods: {
			...mapActions('category',['getIndexCateModelActions']),
			changeIndex(index){
				this.nativeIndex = index
			}
		}
	}
</script>

<style lang="stylus">
	.category
		.header
			display: flex
			padding:20rpx 0
			.search
				width: 380rpx
				height: 60rpx
				border: 2rpx solid #ccc
				border-radius: 20rpx
				display: flex
				align-items: center
				margin: auto
				background: #ccc
				image
					margin-left: 10rpx
					height: 32rpx
					width: 32rpx
				input
					width: 360rpx
					height: 64rpx
					margin-left: 10rpx
		.container
			display: flex
			height: calc(100vh - 106rpx)
			width: 100%
			border-top: 2rpx solid #333
			.left_view
				width: 20%
				height: 100%
				.left_scroll
					width: 100%
					height: calc(100vh - 106rpx)
					border-right: 2rpx solid #333
					.scrollItem
						font-size: 26rpx
						height: 58rpx
						line-height: 58rpx
						text-align: center
						position:relative
						&.active::before
							content: ""
							height: 48rpx
							width: 2rpx
							background-color: red
							position: absolute
							left: 10rpx
							top: 10rpx
			.right_view	
				width:80%
				height: 100%
				.right_scroll
					width: 100%
					height: calc(100vh - 106rpx)
					justify-content: space-around
					.goodList
						display: flex
						flex-wrap: wrap
						justify-content: space-around
						margin: auto
						.goodItem
							width: 180rpx
							height: 260rpx
							text-align: center
							image
								width: 140rpx
								height: 140rpx
							view
								font-size: 30rpx
								height: 30rpx
								color: #000
						
			
</style>
